<!DOCTYPE html>
<html>
    <head>
        <title> </title>
        <script src="./jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="./jtopo-0.4.8-min.js"></script>
        <script type="text/javascript" src="./toolbar.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){                    
            var canvas = document.getElementById('canvas');            
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            var scene = new JTopo.Scene(stage);
            scene.background = './bg.jpg';
            // 转换成JSON字符串的方法
            var json = stage.toJson();
            console.log(json);
            var msgNode = new JTopo.TextNode("双击编辑文字, 点击节点可连线(连个节点)");
            msgNode.zIndex++;
            msgNode.setBound(250, 50);
            scene.add(msgNode);
            
            // 随机生成5个节点
            for(var i=0; i<5; i++){
                var node = new JTopo.Node('Node_' + i);
                node.setLocation(Math.random() * 600, Math.random() * 400);
                scene.add(node);        
            }
                                           
            var currentNode = null; // 中间变量保存当前节点
            var beginNode = null;
            var tempNodeA = new JTopo.Node('tempA');
            tempNodeA.setSize(1, 1);
            
            var tempNodeZ = new JTopo.Node('tempZ');
            tempNodeZ.setSize(1, 1);
            
            var link = new JTopo.Link(tempNodeA, tempNodeZ);
            
            // 松开 - 连线
            scene.mouseup(function(e){
                if(e.button == 2 && e.target != null){
                  scene.remove(link);
                  currentNode = e.target;
                  // 当前位置弹出菜单（div）- 根据节点类型显示不同的菜单
                  if (e.target.elementType == 'node') {
                    $("#contextmenu").css({
                      top: event.pageY,
                      left: event.pageX
                    }).show(); 
                  } else if (e.target.elementType == 'link') {
                    $("#linemenu").css({
                      top: event.pageY,
                      left: event.pageX
                    }).show(); 
                  }
                  return;
                }
                if(e.target != null && e.target instanceof JTopo.Node){
                    if(beginNode == null){
                        // 线条在一个节点上
                        beginNode = e.target;
                        scene.add(link);
                        tempNodeA.setLocation(e.x, e.y);
                        tempNodeZ.setLocation(e.x, e.y);
                    }else if(beginNode !== e.target){
                        // 线条在两个不同的节点上
                        var endNode = e.target;
                        var l = new JTopo.Link(beginNode, endNode);
                        scene.add(l);
                        beginNode = null;
                        scene.remove(link);
                    }else{
                        beginNode = null;
                    }
                }else{
                  scene.remove(link);
                }
            });
            // 按下 - 取消连线
            scene.mousedown(function(e){
                if(e.target == null || e.target === beginNode || e.target === link){
                    scene.remove(link);
                }
            });
            scene.mousemove(function(e){
                tempNodeZ.setLocation(e.x, e.y);
            });
            
            var textfield = $("#jtopo_textfield");
            // 双击编辑文字
            scene.dbclick(function(event){
                if(event.target == null) return;
                var e = event.target;
                textfield.css({
                    top: event.pageY,
                    left: event.pageX - e.width/2
                }).show().val(e.text).focus().select();
                e.text = "";
                textfield[0].JTopoNode = e;
            });
            // 失去焦点
            $("#jtopo_textfield").blur(function(){
                textfield[0].JTopoNode.text = textfield.hide().val();
            });

            // 点击场景中任意位置，关闭弹出的菜单
            stage.click(function(event){
                if(event.button == 0){// 左键
                    // 关闭弹出的菜单（div）
                    $("#contextmenu").hide();
                    $("#linemenu").hide();
                }
            });

            /* 右键节点菜单处理 */    
            $("#contextmenu a").click(function(){
              var text = $(this).text();
              
              if(text == '删除该节点'){
                  scene.remove(currentNode);
                  currentNode = null;
              }if(text == '撤销上一次操作'){
                  currentNode.restore();
              }
              if (currentNode != null){
                  currentNode.save();
              }
              
              if(text == '更改颜色'){
                  currentNode.fillColor = JTopo.util.randomColor();
              }else if(text == '顺时针旋转'){
                  currentNode.rotate += 0.5;
              }else if(text == '逆时针旋转'){
                  currentNode.rotate -= 0.5;
              }else if(text == '放大'){
                  currentNode.scaleX += 0.2;
                  currentNode.scaleY += 0.2;
              }else if(text == '缩小'){
                  currentNode.scaleX -= 0.2;
                  currentNode.scaleY -= 0.2;
              }
              $("#contextmenu").hide();
          });

            // 右键连线菜单处理
            $("#linemenu a").click(function(){
              var text = $(this).text();
              if(text == '删除该节点'){
                scene.remove(currentNode);
                currentNode = null;
              }if(text == '更改颜色'){
                currentNode.strokeColor = JTopo.util.randomColor();
              }if(text == '设置虚线'){
                currentNode.dashedPattern  = 4;
              }if(text == '设置箭头'){
                currentNode.arrowsRadius = 14;
              }
              $("#linemenu").hide();
            })
        });
        </script>
    </head>
    <body>
      <ul id="contextmenu" style="display:none;position: absolute;">    
        <li><a>顺时针旋转</a></li>
        <li><a>逆时针旋转</a></li>    
        <li><a>更改颜色</a></li>
        <li><a>放大</a></li>
        <li><a>缩小</a></li>    
        <li><a>撤销上一次操作</a></li>    
        <li><a>删除该节点</a></li>
      </ul>
      <ul id="linemenu" style="display:none;position: absolute;">  
        <li><a>更改颜色</a></li>
        <li><a>设置虚线</a></li>
        <li><a>设置箭头</a></li> 
        <li><a>删除该节点</a></li>  
      </ul>
      <div id="content">
        <canvas id="canvas" width="910" height="600"></canvas>
        <textarea id="jtopo_textfield" style="position: absolute;display: none;"></textarea>
      </div>
    </body>
</html> 